<template>
    <view>
		<view v-if="isShow" class="time_mask" :class="{'uni-timer-mask-show':timeMaskShow}"></view>
		<view v-if="isShow" class="yx_time_slot" :class="{'fadelogIn1':timeMaskShow}">
			<view class="time_top_box">
				<view class="time_close" @click="close">取消</view>
				<view class="time_text">{{title}}</view>
				<view class="time_comfirm" @click="confirm">确认</view>
			</view>
			<view class="typelist">
				<view class="typeobj" :class="{'typeobj_hover':typeIndex==index}" v-for="(item,index) in typeList" :key="index" @click="handleType(index)">
					<view class="text">{{item}}</view>
					<view class="line"></view>
				</view>
			</view>
			<!-- 时间选择 -->
			<view class="yx_timer_sel">
				<swiper class="sel_swiper" :current="typeIndex">
				    <swiper-item>
				        <view>
							<picker-view :value="startvalue" :indicator-style="indicatorStyle" @change="bindstartChange" class="sel_swiper-item">
							    <picker-view-column>
							        <view class="item" v-for="(item,index) in timeHour" :key="index">{{item}}</view>
							    </picker-view-column>
							    <!-- <picker-view-column>
							        <view class="item" v-for="(item,index) in timeMin" :key="index">{{item}}</view>
							    </picker-view-column> -->
							</picker-view>
						</view>
				    </swiper-item>
				    <swiper-item>
				        <view>
				    		<picker-view :value="endvalue" :indicator-style="indicatorStyle" @change="bindendChange" class="sel_swiper-item">
				    		    <picker-view-column>
				    		        <view class="item" v-for="(item,index) in timeHour02" :key="index">{{item}}</view>
				    		    </picker-view-column>
				    		    <!-- <picker-view-column>
				    		        <view class="item" v-for="(item,index) in timeMin" :key="index">{{item}}</view>
				    		    </picker-view-column> -->
				    		</picker-view>
				    	</view>
				    </swiper-item>
				</swiper>
			</view>
			
		</view>
	</view>
</template>

<script>
export default {
	name:"time_slot",
	props: {
		title: {
		    type: String,
		    default: () => {
		       return "请选择时间";
		    }
		},
	},
    data() {
        return {
			timeMaskShow:false,//遮罩
			isShow:false,//显示
			typeList:["今天","明天"],
			typeIndex:0,//下标
			startvalue:[0,0],//默认下标，14时 00分
			endvalue:[0,0],//默认下标，15时 00分
			indicatorStyle: 'height: 50px;',
			// timeList:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
			timeHour:[],
			timeHour02:[],
			timeMin:[],//分钟可选项
        };
    },
    mounted() {
		let that = this;
		//获取时分11:00-12:00 12:00-13:00 13:00-14:00 14:00-15:00 15:00-16:00 16:00-17:00 17:00-18:00
		that.Net._get('pick_time', {}, res => {
			if (res.code == 200) {
				//console.log(res.data);
				that.timeHour = res.data.send_desirable_time
				that.timeHour02 = res.data.send_desirable_time_2

			}
		});
		// let timeHour = ["10:00-11:00","11:00-12:00","12:00-13:00","13:00-14:00","14:00-15:00","15:00-16:00","16:00-17:00","17:00-18:00",] 

	},
    methods: {
		//看看是不是有两位数
		formatNumber(n) {
			n = n.toString()
			return n[1] ? n : '0' + n
		},
		//开始选择
		bindstartChange(e){
			//console.log(e)
			this.startvalue = e.detail.value
		},
		//结束选择
		bindendChange(e){
			//console.log(e)
			this.endvalue = e.detail.value
		},
        /**
         * 关闭弹窗
         */
        close() {
        	this.timeMaskShow = false
        	this.$nextTick(() => {
        		setTimeout(() => {
        			this.isShow = false
        			this.$emit('close')
        		}, 300)
        	})
        },
        /**
         * 确认按钮
         */
        confirm() {
			if(this.typeIndex == 0){
				var obj = {
					info:{
						time:this.timeHour[this.startvalue[0]],
						day:0,
					},					
				}
			}else if(this.typeIndex == 1){
				var obj = {
					info:{
						time:this.timeHour02[this.endvalue[0]],
						day:1,
					}
				}
			}
			// var obj = {
			// 	start:{
			// 		hour:this.timeHour[this.startvalue[0]],
			// 	},
			// 	end:{
			// 		hour:this.timeHour[this.endvalue[0]],
			// 	}
			// }
			this.$emit('confirm',obj)
			this.close()
        },
		/**
		 * 打开日历弹窗
		 */
		open() {
			this.typeIndex = 0
			this.isShow = true
			this.$nextTick(() => {
				setTimeout(() => {
					this.timeMaskShow = true
				}, 50)
			})
		},
		//栏目选择
		handleType(index){
			if(index!=this.typeIndex){
				if(index==1){
					this.endvalue = [this.startvalue[0]+1,0]
				}
				this.typeIndex = index

			}
		}
		
    }
};
</script>

<style lang="scss" scoped>
.time_mask {
	position: fixed;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
	background-color: $uni-bg-color-mask;
	transition-property: opacity;
	transition-duration: 0.3s;
	opacity: 0;
	/* #ifndef APP-NVUE */
	z-index: 99;
	/* #endif */
}
.yx_time_slot{
	background-color: #FFFFFF;
	width: 100%;
	height: 750rpx;
	position: fixed;
	bottom: calc(var(--window-bottom));
	left: 0;
	right: 0;
	z-index: 99;
	transition-property: transform;
	transition-duration: 0.3s;
	transform: translateY(460px);
	.time_top_box{
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.time_close,.time_comfirm{
			width: 100rpx;
			color: #999999;
			font-size: 28rpx;
			font-weight: 400;
			text-align: center;
		}
		.time_comfirm{
			color: #4360F7;
		}
		.time_text{
			flex: 1;
			font-size: 30rpx;
			font-weight: 800;
			text-align: center;
		}
	}
}
.uni-timer-mask-show{
	opacity: 1;
}
/* 从下往上弹窗动画 */
.fadelogIn1 {
	// -webkit-animation: fadelogIn 0.5s;
	// animation: fadelogIn 0.5s;
	transform: translateY(0);
}
.typelist{
	width: 100%;
	height: 70rpx;
	display: flex;
	align-items: center;
	.typeobj{
		width: 158rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.text{
			height: 65rpx;
			line-height: 65rpx;
			font-size: 28rpx;
			color: #333333;
		}
		.line{
			width: 1rpx;
			height: 5rpx;
		}
	}
	.typeobj_hover{
		.text{
			font-weight: 600;
		}
		.line{
			width: 88rpx;
			transition: width .5s;
			background-color: #4360F7;
		}
	}
}
.yx_timer_sel{
	width: 100%;
	margin-top: 38rpx;
	.sel_swiper{
		// width: 80%;
		// margin: 0 auto;
		height: 500rpx;
	}
	.sel_swiper-item{
		height: 500rpx;
		.item {
		    height: 50px;
			display: flex;
		    align-items: center;
		    justify-content: center;
		    text-align: center;
		}
	}
}
</style>